<template>
    <div class="app-container">
        <div class="return" style="font-size: 14px;">
            <router-link to="/orderer">返回</router-link>
        </div>
        <div>
            <el-steps :active="order.status" finish-status="success" align-center style="margin-top: 50px;">
                <el-step title="提交订单" :description="formatTime(order.createTime)"></el-step>
                <el-step title="支付订单" :description="formatTime(order.paymentTime)"></el-step>
                <el-step title="平台发货" :description="formatTime(order.deliveryTime)"></el-step>
                <el-step title="确认收货" :description="formatTime(order.receiveTime)"></el-step>
                <el-step title="完成评价" :description="formatTime(order.commentTime)"></el-step>
            </el-steps>
        </div>

        <!-- 订单信息 -->
        <el-card shadow="never" style="margin-top: 15px;font-size:12px">
            <div class="operate-container">
                <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
                <span class="color-danger">当前订单状态：{{ order.status }}</span>
            </div>
            <div style="margin-top: 20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">基本信息</span>
            </div>
            <div class="table-layout">
                <el-row>
                    <el-col :span="8" class="table-cell-title">订单编号</el-col>
                    <el-col :span="8" class="table-cell-title">发货单流水号</el-col>
                    <el-col :span="8" class="table-cell-title">用户账号</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" class="table-cell">{{ order.id }}</el-col>
                    <el-col :span="8" class="table-cell">{{ order.logistics_id }}</el-col>
                    <el-col :span="8" class="table-cell">{{ order.user }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" class="table-cell-title">配送方式</el-col>
                    <el-col :span="8" class="table-cell-title">物流单号</el-col>
                    <el-col :span="8" class="table-cell-title">收货时间</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" class="table-cell">{{ order.logistics }}</el-col>
                    <el-col :span="8" class="table-cell">{{ order.logistics_id }}</el-col>
                    <el-col :span="8" class="table-cell">{{ order.receipt }}天</el-col>
                </el-row>
            </div>
            <div style="margin-top: 20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">收货人信息</span>
            </div>
            <div class="table-layout">
                <el-row>
                    <el-col :span="8" class="table-cell-title">收货人</el-col>
                    <el-col :span="8" class="table-cell-title">手机号码</el-col>
                    <el-col :span="8" class="table-cell-title">收货地址</el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" class="table-cell">{{ order?.receiptInfo?.name }}</el-col>
                    <el-col :span="8" class="table-cell">{{ order?.receiptInfo?.phoneNumber }}</el-col>
                    <el-col :span="8" class="table-cell">{{ order?.receiptInfo?.address }}</el-col>

                </el-row>
            </div>
            <div style="margin-top: 20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">商品信息</span>
            </div>
            <el-table ref="orderItemTable" :data="order.goodsInfo" style="width: 100%;margin-top: 20px" border>
                <el-table-column label="商品图片" width="120" align="center">
                    <template v-slot:default="scope">
                        <img :src="scope.row.pic" style="height: 80px">
                    </template>
                </el-table-column>

                <el-table-column label="商品名称" align="center">
                    <template v-slot:default="scope">
                        <p>{{ scope.row.name }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="价格/货号" width="120" align="center">
                    <template v-slot:default="scope">
                        <p>价格：￥{{ scope.row.price }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="简介" width="120" align="center">
                    <template v-slot:default="scope">
                        {{ scope.row.desc }}
                    </template>
                </el-table-column>
                <el-table-column label="数量" width="120" align="center">
                    <template v-slot:default="scope">
                        {{ scope.row.stock }}
                    </template>
                </el-table-column>
                <el-table-column label="小计" width="120" align="center">
                    <template v-slot:default="scope">
                        ￥{{ parseFloat(scope.row.price) * parseFloat(scope.row.stock) }}
                    </template>
                </el-table-column>
            </el-table>
            <div style="float: right;margin: 20px">
                合计：<span class="color-danger">￥{{ order.amount }}</span>
            </div>
            <div style="margin-top: 20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">操作信息</span>
            </div>
            <el-table style="margin-top: 20px;width: 100%" ref="orderHistoryTable" :data="order.operateInfo" border>
                <el-table-column label="操作者" width="120" align="center">
                    <template v-slot:default="scope">
                        {{ scope.row.user }}
                    </template>
                </el-table-column>
                <el-table-column label="操作时间" width="160" align="center">
                    <template v-slot:default="scope">
                        {{ scope.row.operateTime }}
                    </template>
                </el-table-column>
                <el-table-column label="订单状态" width="120" align="center">
                    <template v-slot:default="scope">
                        {{ scope.row.orderStatus }}
                    </template>
                </el-table-column>
                <el-table-column label="备注" align="center">
                    <template v-slot:default="scope">
                        {{ scope.row.remark }}
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import { GetSupplierOrderDetail } from "../../../wailsjs/go/pkg/User"

export default {
    name: "orderDetail",
    data() {
        return {
            order: {}
        }
    },
    methods: {
        formatTime(time) {
            if (time == null || time === '') {
                return '';
            }
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        },
        getOrderDetail() {
            console.log(this.$route.params.id);
            GetSupplierOrderDetail(localStorage.getItem("supplier_email"), this.$route.params.id, localStorage.getItem("supplier_token")).then((rep) => {
                console.log(rep);
                if (rep.code == 401) {
                    this.$router.push("/login")
                }
                this.order = rep.data
            }).catch((rep) => {
                console.log(rep);
            })
        }
    },
    mounted() {
        this.getOrderDetail()
    }
}
</script>

<style scoped>
.app-container {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.total-layout {
    margin-top: 40px;
    cursor: pointer;
}

.total-frame {
    border: 1px solid #DCDFE6;
    padding: 20px;
    height: 100px;
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
}

.total-title {
    text-align: center;
}

.total-value {
    text-align: center;
}

.un-handle-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
}

.layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
}

.un-handle-content {
    padding: 20px 40px;
}

.un-handle-item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px;
}

.overview-layout {
    margin-top: 20px;
}

.overview-item-value {
    font-size: 24px;
    text-align: center;
}

.overview-item-title {
    margin-top: 10px;
    text-align: center;
}

.out-border {
    border: 1px solid #DCDFE6;
}

.statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
}

.mine-layout {
    position: absolute;
    right: 140px;
    top: 107px;
    width: 250px;
    height: 235px;
}

.address-content {
    padding: 20px;
    font-size: 18px
}

.pagination-container {
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}


.detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
}

.operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
}

.operate-button-container {
    float: right;
    margin-right: 20px
}

.table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
}

.table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
}

.table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
}
</style>